<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>好“孕”来 - 园区服务</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: linear-gradient(135deg, #fff9fb 0%, #fff5f7 100%);
      color: #333;
      min-height: 100vh;
      position: relative;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M50,50 Q100,20 150,50 T200,100 Q170,150 100,150 T0,100 Q30,50 50,50 Z" fill="rgba(255,182,193,0.1)"/></svg>');
      background-size: 300px;
      opacity: 0.3;
      z-index: -1;
    }

    .header {
      background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
      color: white;
      padding: 20px 15px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      box-shadow: 0 2px 15px rgba(0,0,0,0.05);
      border-bottom: 1px solid rgba(255,255,255,0.3);
    }

    .header h1 {
      font-size: 20px;
      text-align: center;
      font-weight: 600;
      letter-spacing: 1px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.25);
      border: 1px solid rgba(255,255,255,0.4);
      color: white;
      padding: 8px 15px;
      border-radius: 20px;
      font-size: 14px;
      cursor: pointer;
      backdrop-filter: blur(5px);
      transition: all 0.3s ease;
    }

    .container {
      padding: 90px 15px 30px;
      max-width: 600px;
      margin: 0 auto;
    }

    .section-card {
      background: rgba(255, 255, 255, 0.85);
      border-radius: 20px;
      padding: 25px;
      margin-bottom: 25px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
    }

    .section-card::before {
      content: "";
      position: absolute;
      top: -50px;
      right: -50px;
      width: 100px;
      height: 100px;
      background: rgba(255, 182, 193, 0.2);
      border-radius: 50%;
      z-index: -1;
    }

    .section-title {
      font-size: 19px;
      margin-bottom: 15px;
      color: #5a2d3e;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .section-icon {
      font-size: 24px;
    }

    .service-item {
      padding: 15px 0;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .service-item:hover {
      background: rgba(255, 182, 193, 0.05);
      margin: 0 -25px;
      padding-left: 25px;
      padding-right: 25px;
      border-radius: 12px;
    }

    .service-item:last-child {
      border-bottom: none;
    }

    .service-name {
      font-size: 16px;
      color: #333;
    }

    .service-desc {
      font-size: 13px;
      color: #8a6d7c;
      margin-top: 4px;
    }

    .arrow {
      font-size: 18px;
      color: #ccc;
    }

    .btn {
      background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
      color: white;
      border: none;
      padding: 14px;
      border-radius: 30px;
      font-size: 16px;
      cursor: pointer;
      width: 100%;
      margin-top: 15px;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      font-weight: 600;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.08);
      border: 1px solid rgba(255,255,255,0.4);
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }

    /* 子页面样式 */
    .page {
      display: none;
      animation: fadeIn 0.4s ease-out;
    }

    .page.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-label {
      display: block;
      font-size: 15px;
      color: #5a2d3e;
      margin-bottom: 10px;
      font-weight: 500;
    }

    .form-control {
      width: 100%;
      padding: 14px;
      border: 1px solid rgba(255, 182, 193, 0.4);
      border-radius: 12px;
      font-size: 15px;
      transition: all 0.3s ease;
      background: rgba(255, 255, 255, 0.7);
    }

    .form-control:focus {
      outline: none;
      border-color: #ff9a9e;
      box-shadow: 0 0 0 3px rgba(255, 154, 158, 0.2);
    }

    .status-badge {
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      background: rgba(123, 239, 178, 0.15);
      color: #0c8f61;
      border: 1px solid rgba(123, 239, 178, 0.3);
    }

    .status-badge.busy {
      background: rgba(255, 182, 193, 0.15);
      color: #d63384;
      border-color: rgba(255, 182, 193, 0.3);
    }

    .info-text {
      font-size: 13px;
      color: #8a6d7c;
      margin-top: 10px;
      line-height: 1.5;
    }

    @media (max-width: 480px) {
      .header h1 {
        font-size: 18px;
      }
    }
  </style>
</head>
<body>

  <!-- 园区服务主页面 -->
  <div id="mainPage" class="page active">
    <div class="header">
      <button class="back-btn" onclick="window.location.href='index.html#userMenu'">返回</button>  <!-- 返回欢迎界面 1014本次修改 -->
	  <h1>好“孕”来 - 园区服务</h1>
    </div>

    <div class="container">
      <!-- 母婴室预约 -->
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🍼</span>
          母婴室预约
        </div>
        <div class="service-item" onclick="showPage('motherRoomPage')">
          <div>
            <div class="service-name">预约母婴室</div>
            <div class="service-desc">实时查看空闲状态，提前锁定使用时段</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="showPage('myMotherRoomPage')">
          <div>
            <div class="service-name">我的预约</div>
            <div class="service-desc">查看历史与 upcoming 预约记录</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>

      <!-- 孕产车位 -->
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🚗</span>
          孕产车位专属
        </div>
        <div class="service-item" onclick="showPage('parkingPage')">
          <div>
            <div class="service-name">车位预约</div>
            <div class="service-desc">提前1-3天申请，上班直达电梯口</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="showPage('myParkingPage')">
          <div>
            <div class="service-name">预约记录</div>
            <div class="service-desc">查看车位安排与使用历史</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>

      <!-- 营养私房菜 -->
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🍱</span>
          营养私房菜
        </div>
        <div class="service-item" onclick="showPage('nutritionPage')">
          <div>
            <div class="service-name">今日推荐</div>
            <div class="service-desc">根据孕周智能匹配营养套餐</div>
          </div>
          <div class="arrow">›</div>
        </div>
        <div class="service-item" onclick="showPage('orderPage')">
          <div>
            <div class="service-name">食堂订餐</div>
            <div class="service-desc">提前一日定制，次日新鲜送达</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 母婴室预约页 -->
  <div id="motherRoomPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>预约母婴室</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📍</span>
          选择楼层与时段
        </div>
        <div class="form-group">
          <label class="form-label">楼层</label>
          <select class="form-control">
            <option>3楼 A区</option>
            <option>5楼 B区</option>
            <option>7楼 C区</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">日期</label>
          <input type="date" class="form-control" value="2024-12-19">
        </div>
        <div class="form-group">
          <label class="form-label">时段（30分钟）</label>
          <select class="form-control">
            <option>09:00 - 09:30</option>
            <option>09:30 - 10:00</option>
            <option>10:00 - 10:30</option>
            <option>10:30 - 11:00</option>
            <option>14:00 - 14:30</option>
            <option>14:30 - 15:00</option>
          </select>
        </div>
        <div class="info-text">绿色 = 空闲，红色 = 占用，灰色 = 关闭</div>
        <button class="btn">立即预约</button>
      </div>
    </div>
  </div>

  <!-- 我的母婴室预约 -->
  <div id="myMotherRoomPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>我的预约</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="service-item">
          <div>
            <div class="service-name">今日 14:00-14:30</div>
            <div class="service-desc">3楼 A区 · 预约成功</div>
          </div>
          <span class="status-badge">进行中</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">明日 10:00-10:30</div>
            <div class="service-desc">5楼 B区 · 已确认</div>
          </div>
          <span class="status-badge">已确认</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">2024-12-22 09:30-10:00</div>
            <div class="service-desc">7楼 C区 · 已失效</div>
          </div>
          <span class="status-badge busy">已失效</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 车位预约页 -->
  <div id="parkingPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>车位预约</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">📅</span>
          选择日期与时段
        </div>
        <div class="form-group">
          <label class="form-label">预约日期</label>
          <input type="date" class="form-control" value="2024-12-20">
        </div>
        <div class="form-group">
          <label class="form-label">预计到达</label>
          <select class="form-control">
            <option>08:00-08:30</option>
            <option>08:30-09:00</option>
            <option>09:00-09:30</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">车牌号</label>
          <input type="text" class="form-control" placeholder="例：闽A12345">
        </div>
        <div class="info-text">系统将优先分配套餐电梯口最近车位，并在前一日18:00前推送确认信息。</div>
        <button class="btn">提交预约</button>
      </div>
    </div>
  </div>

  <!-- 我的车位记录 -->
  <div id="myParkingPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>预约记录</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="service-item">
          <div>
            <div class="service-name">明日 08:30</div>
            <div class="service-desc">车位编号：B3-18 · 已确认</div>
          </div>
          <span class="status-badge">已确认</span>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">2024-12-18 08:00</div>
            <div class="service-desc">车位编号：A2-09 · 已完成</div>
          </div>
          <span class="status-badge">已完成</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 营养推荐页 -->
  <div id="nutritionPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>今日营养推荐</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🤱</span>
          为您定制（孕24周）
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">早餐</div>
            <div class="service-desc">全麦面包 + 鸡蛋 + 牛奶 + 橙子</div>
          </div>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">午餐</div>
            <div class="service-desc">杂粮饭 + 清蒸鲈鱼 + 西兰花胡萝卜 + 紫菜虾皮汤</div>
          </div>
        </div>
        <div class="service-item">
          <div>
            <div class="service-name">晚餐</div>
            <div class="service-desc">二米饭 + 番茄炖牛腩 + 菠菜木耳 + 菌菇豆腐汤</div>
          </div>
        </div>
        <div class="info-text">每日需求：热量+300kcal，蛋白质+25g，钙+200mg，铁+4mg，DHA+200mg</div>
      </div>
    </div>
  </div>

  <!-- 食堂订餐页 -->
  <div id="orderPage" class="page">
    <div class="header">
      <button class="back-btn" onclick="showPage('mainPage')">返回</button>
      <h1>食堂订餐</h1>
    </div>
    <div class="container">
      <div class="section-card">
        <div class="section-title">
          <span class="section-icon">🍱</span>
          选择日期与套餐
        </div>
        <div class="form-group">
          <label class="form-label">取餐日期</label>
          <input type="date" class="form-control" value="2024-12-20">
        </div>
        <div class="form-group">
          <label class="form-label">套餐类型</label>
          <select class="form-control">
            <option>早餐</option>
            <option>午餐</option>
            <option>晚餐</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">菜品选择</label>
          <div style="margin-top:10px;">
            <label style="display:flex; align-items:center; margin-bottom:10px;">
              <input type="checkbox" checked> 清蒸鲈鱼套餐
            </label>
            <label style="display:flex; align-items:center; margin-bottom:10px;">
              <input type="checkbox"> 番茄炖牛腩套餐
            </label>
            <label style="display:flex; align-items:center; margin-bottom:10px;">
              <input type="checkbox"> 低GI糖尿病友好套餐
            </label>
          </div>
        </div>
        <div class="info-text">订餐截止：前一日14:00；取餐地点：3楼孕产妇窗口；出示员工卡即可领取。</div>
        <button class="btn">提交订单</button>
      </div>
    </div>
  </div>

  <script>
    function showPage(pageId) {
      const pages = document.querySelectorAll('.page');
      pages.forEach(page => page.classList.remove('active'));
      const target = document.getElementById(pageId);
      if (target) target.classList.add('active');
      window.scrollTo(0, 0);
    }

    document.addEventListener('DOMContentLoaded', () => {
      // 设置默认日期为明天
      const tomorrow = new Date();
      tomorrow.setDate(tomorrow.getDate() + 1);
      const dateStr = tomorrow.toISOString().split('T')[0];
      document.querySelectorAll('input[type="date"]').forEach(input => {
        input.value = dateStr;
      });

      // 触摸反馈
      const items = document.querySelectorAll('.service-item, .btn');
      items.forEach(item => {
        item.addEventListener('touchstart', () => {
          item.style.transform = 'scale(0.98)';
        });
        item.addEventListener('touchend', () => {
          item.style.transform = '';
        });
      });

      // 表单提交提示
      document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', e => {
          e.preventDefault();
          alert('提交成功！');
        });
      });
    });
	
	// 返回到欢迎页面 1014本次修改
	document.addEventListener('DOMContentLoaded', function () {
		const urlParams = new URLSearchParams(window.location.search);
		const from = urlParams.get('from');

		const backBtn = document.getElementById('backBtn');
		if (from === 'userMenu') {
			backBtn.onclick = function () {
				window.location.href = 'index.html#userMenu';
			};
		} else {
			backBtn.onclick = function () {
				window.location.href = 'index.html';
			};
		}
	});
  	
  </script>
</body>
</html>